<template>
    <div style="height: 100%;" ref="chartRef"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, nextTick, ref } from 'vue'
import elementResizeDetectorMaker from 'element-resize-detector'

const chartRef = ref()

const props = defineProps(['option'])

const renderChart = () => {
    const chart = echarts.init(chartRef.value, null, {
        renderer: 'svg',
        devicePixelRatio: 2.5
    });
    chart.setOption(props.option);
    return chart
}

onMounted(() => {
    nextTick(() => {
        const chart = renderChart()
        const erd = elementResizeDetectorMaker()
        erd.listenTo(chartRef.value, element => {
            chart.resize()
        })
    })
})

</script>

<style scoped lang="less"></style>